<template>
    <div>
        <HeaderS :styleColor="1"></HeaderS>
        <div :class="screenWidth > 1000 ? 'page-content' : 'h5s-content'">
            <div class="main">
                <div class="bannerTop">
                    <div :class="screenWidth > 1000 ? 'banner' : 'h5s'">
                        <div class="title">西安简介</div>
                        <div class="summary">
                            <span>西安地处关中平原中部，是国家明确建设的国际化大都市、国家中心城市，获评国家卫生城市、国家园林城市、中国形象最佳城市、中国国际形象最佳城市、中国最具幸福感城市、全国文明城市等。</span>
                          
                            <div class="classify" @click.stop="openPath('news-details?id=2696')">
                                <div class="list-box">
                                    <div class="num">2</div>
                                    <div class="name">县（个）</div>
                                </div>
                                <div class="list-box">
                                    <div class="num">11</div>
                                    <div class="name">市辖区（个）</div>
                                </div>
                                <div class="list-box">
                                    <div class="num">1316.76</div>
                                    <div class="name">人口（万人）</div>
                                </div>
                                <div class="list-box">
                                    <div class="num">10752</div>
                                    <div class="name">面积（km²）</div>
                                </div>
                            </div>
                        </div>
                        <div class="btn tip"  @click="openPath('survey-details?id=49')" >
                                <span>查看详情</span>
                            </div>
                    </div>
                </div>
                <div :class="screenWidth > 1000 ? 'understand-xian' : 'h5s2'">
                    <div ref="title" class="title">了解西安</div>
                    <div class="main">
                        <listBox />
                        <!-- <div class="main-desc">
                            <div class="summary">
                                西安，古称长安、镐京，是陕西省会、副省级市、关中平原城市群核心城市、丝绸之路起点城市、“一带一路”核心区、中国西部地区重要的中心城市，国家重要的科研、教育、工业基地。西安是中国四大古都之一，联合国科教文组织于1981年确定的“世界历史名城”，美媒评选的世界十大古都之一。
                            </div>
                            
                        </div> -->
                        <!-- <div class="list-wrap">
                            <div class="list-box" @click="openPath('survey-details?id=49')">
                                <div class="l-iconfont icon">&#xe674;</div>
                                <div class="name">西安简介</div>
                            </div>
                            <div class="list-box" @click="openPath('survey-details?id=50')">
                                <div class="l-iconfont icon">&#xe616;</div>
                                <div class="name">建置沿革</div>
                            </div>
                            <div class="list-box" @click="openPath('survey-details?id=51')">
                                <div class="l-iconfont icon">&#xe693;</div>
                                <div class="name">地理环境</div>
                            </div>
                            <div class="list-box" @click="openPath('survey-details?id=52')">
                                <div class="l-iconfont icon">&#xe610;</div>
                                <div class="name">行政区划</div>
                            </div>
                            <div class="list-box" @click="openPath('survey-details?id=53')">
                                <div class="l-iconfont icon">&#xe626;</div>
                                <div class="name">民族宗教</div>
                            </div>
                            <div class="list-box" @click="openPath('survey-details?id=54')">
                                <div class="l-iconfont icon">&#xe607;</div>
                                <div class="name">城市荣誉</div>
                            </div>
                        </div> -->
                    </div>
                </div>
                <!-- <div :class="screenWidth > 1000 ? 'scenic-list' : 'h5s3'">
                    <div class="title">全景漫游</div>
                    <div class="list-wrap" v-loadig="loading">
                        <div class="list-box" @click="openUrl(item.id, item.url)" v-for="item in typeList"
                            :key="item.id">
                            <div class="img-url" :style="{ 'background-image': 'url(' + item.thumbnail + ')' }">
                                <div class="mask"><i class="l-iconfont">&#xe618;</i></div>
                            </div>
                            <div class="text-wrap"> {{ item.post_title }} </div>
                        </div>
                    </div>
                    <div class="more-btn" @click="openPath('720full-list')"> 查看更多 </div>
                </div> -->
            </div>
        </div>

        <FooterS></FooterS>
    </div>
</template>
<script>
import listBox from './listBox.vue';
export default ({
    components: {
        listBox
    },
    data() {
        return {
            typeList: []
        }
    },
    computed: {
        screenWidth() {
            return this.$store.getters.screenWidth
        }
    },
    watch: {

    },
    mounted() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
        // this.getData()
        if (this.$route.query.tag) {
            this.$refs.title.scrollIntoView({
                behavior: 'smooth'
            });
        }
    },
    methods: {
        openUrl(id, url) {
            if (url) {
                this.$confirm('', '温馨提示', {
                    message: this.$store.state.cnode,
                    dangerouslyUseHTMLString: true,
                    confirmButtonText: '继续访问',
                    cancelButtonText: '放弃',
                    center: true
                })
                    .then(_ => {
                        window.open(url, '_blank');
                    })
                    .catch(_ => { })
            } else {
                this.$router.push({
                    path: 'news-details',
                    query: {
                        id: id
                    }
                })
            }
        },
        openPath(path, id) {
            this.$router.push(path)
        },
        getData(data) {
            this.loading = true;
            this.$api.getArtList({ lang: this.$i18n.locale, cid: 56, ...data }).then((res) => {
                if (res.data.code == 1) {
                    console.log(res.data);
                    this.typeList = res.data.data.list_data.data
                    this.loading = false

                }
            })
        },
    }
})
</script>
<style scoped lang="scss">
.page-content {
    min-height: -webkit-calc(100vh - 25.52083vw);
    min-height: calc(100vh - 25.52083vw);
    min-width: 70.83333vw;
}

.bannerTop .banner {
    cursor: pointer;
    width: 100vw;
    height: 39.58333vw;
    background-image: url(@/assets/img/sl3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    text-align: center;
    color: #fff;
    position: relative;
}

.bannerTop .banner .title {
    font-weight: bold;
    font-size: 2.08333vw;
    margin: 16.66667vw 0 1.04167vw;
}

.bannerTop .banner .summary {
    font-size: 1.2625vw;
    padding: 0 18vw;
    border-radius: 10px;

    >span {
        margin-bottom: 0.9vw;
        display: block;
    }

}
.bannerTop .banner .btn {
        margin-bottom: 1vw;
        display: flex;
        justify-content: center;

        span {
            padding: 0.2vw;
            border: 1px solid #fff;
            font-size: 0.8vw;
            border-radius: 1vw;
            width: 6vw;

            &:hover {
                transform: translateY(-0.2vw);
                transition: transform 0.3s ease;
            }
        }
    }
.bannerTop .banner .tip {
    // width: 1.04167vw;
    position: absolute;
    bottom: 0;
    left: -webkit-calc(50% - 3vw);
    left: calc(50% - 3vw);
    // -webkit-animation: bounce-down-data-bd225cd6 1.6s linear infinite;
    // animation: bounce-down-data-bd225cd6 1.6s linear infinite;
    max-width: 100%;
    border: 0;
    vertical-align: middle;
}

.understand-xian .title {
    margin: 5.72917vw 0 0;
    color: #333;
    font-size: 1.5625vw;
    font-weight: bold;
    text-align: center;
    scroll-margin-top: 5.72917vw;
}

@keyframes bounce-down-data-bd225cd6 {
    25% {
        -webkit-transform: translateY(-4px);
    }

    50%,
    100% {
        -webkit-transform: translateY(0);
    }

    75% {
        -webkit-transform: translateY(4px);
    }
}

.understand-xian .main .list-wrap .list-box:hover {
    background: #e31c1c;
    -webkit-animation: slide1-3da1f24d 0.5s ease;
    animation: slide1-3da1f24d 0.5s ease;
}

@keyframes slide1-3da1f24d {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }


    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    75% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.understand-xian .main .list-wrap .list-box:hover .name,
.understand-xian .main .list-wrap .list-box:hover .icon {
    color: #fff;
}

.understand-xian {
    width: 100vw;
    // height: 39.58333vw;
    // background-image: url(@/assets/img/sl4.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
}

.bannerTop .banner .summary .classify {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    padding-bottom: 0.5vw;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(2px); /* 背景模糊 */
    -webkit-backdrop-filter: blur(2px); /* Safari 支持 */
    margin: 0 2vw;
    border-radius: 1vw;
}

.bannerTop .banner .summary .classify .list-box {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    margin: 0 2.38542vw;
}

.bannerTop .banner .summary .classify .list-box .num {
    color: #e31c1c;
    font-weight: Bold;
    font-size: 2.125vw;
}

.bannerTop .banner .summary .classify .list-box .name {
    color: #fff;
    font-size: 0.83333vw;
}

.understand-xian .main .main-desc {
    width: 67.86458vw;
    margin: 2.60417vw auto 3.64583vw;
    color: #333;
    font-size: 0.83333vw;
    text-align: center;
    line-height: 1.66667vw;
}

.understand-xian .main .list-wrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
}

.understand-xian .main .list-wrap .list-box {
    width: 11.45833vw;
    height: 7.29167vw;
    background-color: rgba(255, 255, 255, 0.7);
    margin-left: 3.125vw;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
}

.understand-xian .main .list-wrap .list-box:first-child {
    margin-left: 0;
}

.understand-xian .main .list-wrap .list-box .icon {
    font-size: 2.08333vw;
    margin: 1.04167vw 0 0.26042vw;
}

.understand-xian .main .list-wrap .list-box .name {
    color: #333;
    font-size: 0.83333vw;
}

.scenic-list .title {
    text-align: center;
    font-size: 1.5625vw;
    font-weight: bold;
    color: #333;
    margin: 5.72917vw 0 2.60417vw;
}

.scenic-list .list-wrap {
    width: 87.5vw;
    margin: 0 auto 3.125vw;
}

.scenic-list .list-wrap .list-box {
    display: inline-block;
    width: 27.08333vw;
    margin-left: 3.125vw;
    cursor: pointer;
}

.scenic-list .list-wrap .list-box:first-child {
    margin-left: 0;
}

.scenic-list .list-wrap .list-box .img-url {
    width: 27.08333vw;
    height: 15.625vw;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.scenic-list .list-wrap .list-box .text-wrap {
    width: 27.08333vw;
    height: 4.16667vw;
    text-align: center;
    line-height: 4.16667vw;
    background-color: #f5f5f5;
    color: #333;
    font-size: 0.83333vw;
}

.scenic-list .list-wrap .list-box:hover .mask {
    display: block !important;
}

.scenic-list .list-wrap .list-box .img-url .mask {
    width: 100%;
    height: 100%;
    position: relative;
    display: none;
    background: rgba(0, 0, 0, 0.3);
}

.scenic-list .list-wrap .list-box .img-url .mask i {
    font-size: 1.66667vw;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.scenic-list .list-wrap .list-box:hover .text-wrap {
    color: #e31c1c;
}

@media (max-width:1000px) {
    .h5s-content {
        min-height: -webkit-calc(100vh - 6rem);
        min-height: calc(100vh - 6rem);
    }
.bannerTop{
    position: relative;
}
    .h5s {
        width: 7.5rem;
        height: 4.6rem;
        background-image: url(@/assets/img/sl3.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        text-align: center;
        overflow: hidden;
        font-size: 0;
        color: #fff;
    }

    .h5s .title {
        font-size: 0.4rem;
        font-weight: 700;
        margin: .6rem 0 0.3rem;
    }

    .h5s .summary {
        font-size: 0.25rem;
        padding: 0 .1rem;

        >span {
            display: block;
            margin-bottom: .1rem;
        }

      
    }
    .btn {
            margin-bottom: .3rem;
            display: flex;
            justify-content: center;

            span {
                padding: 0.02rem;
                border: 1px solid #fff;
                font-size: 0.2rem;
                border-radius: 0.1rem;
                width: 1rem;

            }
        }
  .tip {
    // width: 1.04167vw;
    position: absolute;
    bottom: 0;
    left: -webkit-calc(50% - 0.5rem);
    left: calc(50% - 0.5rem);
    // -webkit-animation: bounce-down-data-bd225cd6 1.6s linear infinite;
    // animation: bounce-down-data-bd225cd6 1.6s linear infinite;
    max-width: 100%;
    border: 0;
    vertical-align: middle;
}

    .h5s2 {
        width: 7.5rem;
        // height: 10rem;
        // background-image: url(@/assets/img/sl4.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        overflow: hidden;
    }

    .h5s2 .title {
        color: #333;
        font-size: 0.4rem;
        font-weight: 700;
        text-align: center;
        margin: 0.7rem 0 0.5rem;

    }

    .h5s2 .main {
        // padding: 0 0.3rem;
    }

    .classify {
        display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    padding-bottom: 0.5vw;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(2px); /* 背景模糊 */
    -webkit-backdrop-filter: blur(2px); /* Safari 支持 */
    margin: 0 2vw;
    border-radius: 1vw;
    }

    .classify .list-box {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
        margin: 0 0.15rem;
    }

    .classify .list-box .num {
        color: #e31c1c;
        font-weight: Bold;
        font-size: 0.48rem;
    }

    .classify .list-box .name {
        color: #fff;
        font-size: 0.2rem;
    }

    .h5s2 .main .main-desc {
        width: 100%;
        padding: 0 0.05rem;
        margin: 0.5rem auto 0.7rem;
        color: #333;
        font-size: 0.24rem;
        text-align: center;
        line-height: 0.36rem;
    }

    .h5s2 .main .list-wrap {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .h5s2 .main .list-wrap .list-box:nth-child(3n-1) {
        margin: 0 0.3rem;
    }

    .h5s2 .main .list-wrap .list-box:first-child {
        margin-left: 0;
    }

    .h5s2 .main .list-wrap .list-box {
        width: 2.1rem;
        height: 1.6rem;
        background-color: rgba(255, 255, 255, 0.7);
        overflow: hidden;
        text-align: center;
        cursor: pointer;
        margin-bottom: 0.3rem;
    }

    .h5s2 .main .list-wrap .list-box .icon {
        font-size: 0.4rem;
        margin: 0.3rem 0 0.05rem;
    }

    .h5s2 .main .list-wrap .list-box .name {
        color: #333;
        font-size: 0.26rem;
    }

    .h5s3 .title {
        font-weight: 700;
        font-size: 0.4rem;
        color: #333;
        margin: 1rem 0 0.6rem;
        text-align: center;
    }

    .h5s3 .list-wrap {
        width: 100%;
        padding: 0 0.3rem;
    }

    .h5s3 .list-wrap .list-box {
        margin-bottom: 0.6rem;
    }

    .h5s3 .list-wrap .list-box .img-url {
        width: 100%;
        height: 3.83rem;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .h5s3 .list-wrap .list-box .img-url .mask {
        display: none;
    }

    .h5s3 .list-wrap .text-wrap {
        background: #f5f5f5;
        width: 100%;
        height: 1rem;
        font-weight: 700;
        font-size: 0.3rem;
        color: #333;
        text-align: center;
        line-height: 1rem;
    }

    .h5s3 .more-btn {
        margin: 0.6rem auto 1rem;
        width: 2rem;
        height: 0.6rem;
        background: #f5f5f5;
        border-radius: 0.3rem;
        line-height: 0.6rem;
        text-align: center;
        color: #666;
        font-size: 0.24rem;
    }
}
</style>